<template>
  <div></div>
</template>

<script setup>
import { getWuhanBridges } from '@/api'
import { inject, onMounted, onBeforeUnmount } from 'vue'
import { LineLayer, Popup } from '@antv/l7'
const { map, scene } = inject('mapScene')
let bridgeLayer
let popup = new Popup()
scene.addPopup(popup)
onMounted(async () => {
  map.flyTo({
    center: [114.26459274967397, 30.5002467409972],
    zoom: 13.2,
    pitch: 67,
    bearing: -21,
  })
  const { data: bridgeData } = await getWuhanBridges()
  bridgeLayer = new LineLayer({
    name: '桥梁',
  })
  bridgeLayer
    .source(bridgeData)
    .shape('arc3d')
    .color('name', ['yellow', 'red', 'blue', 'green'])
    .size(10)
    .style({
      thetaOffset: 1,
    })
  scene.addLayer(bridgeLayer)
  //点击桥梁图层 弹出popup
  bridgeLayer.on('click', (e) => {
    const {
      feature: {
        properties: { name, info },
      },
      lngLat,
    } = e
    popup.setLngLat(lngLat)
    popup.setHTML(`<div style="font-size:12px">${info}</div>`)
    popup.setTitle(name)
  })
})
onBeforeUnmount(() => {
  scene.removeLayer(bridgeLayer)
  scene.removePopup(popup)
})
</script>

<style lang="scss" scoped></style>
